/*
 * home 页面中的 图层 组件
 * author:wangxd
 */

import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Input } from 'antd';
import { CloseOutlined, UpOutlined, DownOutlined } from '@ant-design/icons';
import CustomLayerList from './components';
import { jsapi, viewUtils } from '@/utils/arcgis';
import searchImg from './images/搜索.png';
import styles from './index.less';

const BimLayerList = ({ app, dispatch, onClose }) => {
  const [searchvalue, setSearchvalue] = useState('');
  const [standStyle, setStandStyle] = useState(true);
  const [webSceneLoaded, setWebSceneLoaded] = useState(false);

  useEffect(() => {
    // 获取所有的bim模型目录树
    dispatch({
      type: 'bimmodel/getBimMenuTreeData',
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (app.viewLoaded && !webSceneLoaded) {
      Promise.all([viewUtils.isViewReady()]).then(() => {
        setWebSceneLoaded(true);
      });
    }
  }, [webSceneLoaded, app.viewLoaded]);

  const searchonChange = e => {
    setSearchvalue(e.currentTarget.value);
  };

  function searchimgClick() {
    dispatch({
      type: 'layerlist/upsearchBimMap',
      payload: searchvalue,
    });
  }

  const changeUpDown = () => {
    setStandStyle(!standStyle);
  };
  return (
    <div
      className={styles['progress-update']}
      style={{display:'block'}}
    >
      <div className={styles['update-title']}>
        <p className={styles.title}>图层管理</p>
        <Input
          placeholder="请输入搜索关键词"
          onChange={searchonChange}
          onPressEnter={searchimgClick}
          prefix={
            <img src={searchImg} onClick={searchimgClick} style={{ cursor: 'pointer' }} alt="" />
          }
          size="small"
        />
        <CloseOutlined className={styles.closebutton} onClick={onClose} />
        {standStyle ? <UpOutlined  className={styles.upbutton}
        onClick={changeUpDown}/>:<DownOutlined  className={styles.upbutton}
        onClick={changeUpDown}/>}
      </div>

      <div className={styles.flexable} style={{ display: standStyle ? 'block' : 'none' }}>
        <CustomLayerList />
      </div>
    </div>
  );
};

export default connect(({ app }) => {
  return {
    app,
  };
})(BimLayerList);
